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TYPOGRAPHY ESSENTIALS 


In this lecture, we'll investigate some of the more common terminologies 
and definitions in typography. 


It's crucial that students would learn and memorize MOST if not ALL of these 
terms to have the vocabulary to follow up in the next lectures. 


TYPOGRAPHY ESSENTIALS 


Terminologies 


Categorizations 
Serif 

Sans Serif 
Monospace 

Script 

Handwriting 
Blackletter 

Display 


Variants 
Weights 
With 

Italic Oblique 
Stylistic 


Formatting 
size 
Alignment 
Line Length 
Leading 
Tracking 
Kering 
Others 


WITHIN A TYPEFACE 


Firstly, let's look at the smallest element of typography. 


What elements does a typeface contain? 





CHARACTERS 
A typographic symbol that represents a letter. 


ABCDEFGHIJKLMNOP 
QRSTUVWXY 7850 4618 
hijklmnopgrstuv wxyz 
0123456789 
OH AY IND} 


CHARACTERS 


Characters of a Typeface may include 
Latin Uppercase: A - Z 


Latin Lowercase: a — z 


Numerals: 0 – 9 





Punctuation Marks: , .:;? etc. 
Symbols: * % + = etc. 
Extended Latin: À À E E etc. 


Non-Latin: Japanese, Hebrew, Chinese, etc. 


GLYPHS 


Glyph - although commonly (and incorrectly) used interchangeably with 
Character - is the actual shape of the design of a letterform. 


When you open a typeface, using a font editor software or checking the 
glyphs using Illustrator, you'll see... 


GLYPHS 





GLYPHS 


+ One character can be represented by more than multiple glyph. 
+ OpenType fonts can accommodate many glyphs for a single character 


+ Some glyphs are not representation of characters but created to solely 
for typographic design purposes. 


ТЕ, 


GLYPHS 





H 
H 
i 
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ANATOMY OF TYPE 





ANATOMY OF TYPE 


Ascender 


пау 75 
Neck 


ANATOMY OF TYPE 


http;//www.typographydeconstructed.com/category/anatomy-of-type/ 





http:/fontnotes.com/wp-contentuploads/2013/01/ 
FontAnatomyWallpaper1920x1200 
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Terminologles 
Characters 
бур» 

Anatomy 


Categorizations 
Serif 

Sans Serif 

Mon 








Variants 
Weights 
wath 

halic Oblique 
style 


Formatting 
Sue 
Alignment 
Line Length 
Leading 
Tracking 
Kering 
Others 


CATEGORIZING TYPEFACES 


Why there are so many typefaces? 
Why do we need new ones? 

With 160,000+ typefaces in existence, both the novice and the pro can easily 
become lost. 

Many typefaces will look similar to untrained eyes at first glance. 


But hopefully, you'll develop your way to see how different they are. 


SERIF 


SERIF 


SERIF 


"<= 
"re 
rr= 


are 


SERIF 
ABCDEFGHIJKLMNOP 
QRSTUVWXYZabcdefg 

hijklmnopgrstuv wxyz 
0123456789 
OH AY IND} 


SERIF 


Trajan Column 113 AD 


SPOPVIVSQVEROMANVS ^ 

PS ak tT NERVAE 
TRAIAN OANGGERMPDACICOPONTI: 
MAXIMOTRIBPOTXVIHN PVICOSVIPP 
—— (ANEDAEALTITVDINIS 
MONSETIOCVS VSSITEGES TVS 


СЛОМ RUSTICA 


OLDSTYLE SERIF 


Origin: Late 15% – Mid 18^ Century 


Adobe Caslon Pro Regular 
ABDEFGHIJKLM 
NOPORSTUVWXYZ 
abcdefghijklm 
nopgrstuvwxyz 
1234567890 
ЖАҒЫ», 


OLDSTYLE SERIF 


+ a.k.a. Humanist 
* Little contrast 


between thick & thin 
* Curved strokes with 
axis inclined to the 


left 


* Bracket serif 

+ Examples: Caslon, 
Jenson, Gaudy Old 
Style, Palatino, etc. 


La typographie est prin 


TRANSITIONAL SERIF 


Origin: 18" Centuı 


" ABCDEFGHIJKLM 
NOPORSTUVWXYZ 
abcdefghijklm 
nopgrstuvwxyz 
0123456789 
'@#$%^&*() 


TRANSITIONAL SERIF 


Little contrast 
between thick & thin 
Curved strokes with 
axis more vertical 
than diagonal 
Thinner, flat bracket 
serif 

Examples: Baskerville, 
Times, Times New 
Roman, Bookman, 
Century, Georgia, etc. 


ABCDEF 
GHIJKLM 
NOPORS 
TUVWX 
YZ&C TO 


MODERN SERIF 
ABCDEFGHIJKLM 
NOPQRSTUVWXYZ 
abcdefghijklm 
nopgrstuvwxyz 
0123450789 
!@#$%^&*() 


MODERN SERIF 


aka. Didone 
0-2000 ( CNRC d і 1 
oem _ VOINCIGENTA 
vertical axis 
Little or no bracket Weekly zine 
serif 


Examples: Bodoni, 
Didot, Walbaum, etc. 





` Journal 





SLAB SERIF 


Origin: Late 18^ — Early 19% Century 


ABCDEFGHIJKLM 
NOPQRSTUVWXYZ 
abcdefghijklmnop 
grstuvwxyz 
1234567890 


SLAB SERIF 


< aka. Egyptian ABCDEFGHIJKL 
+ Hardly any stroke MNOPQRSTUVW 
contrast, appearing to XYZabcdefghijklm 


be monostroke. 


* Often geometric nopqrstuvwxyz&1 
+ Little or no bracket, 23456'7890($£.,!?) 
— ABCDEFCHIJKLMN 

+ Examples: Clarendon, ~ 
Rockwell, etc. OPORSTUVWXYZA 
abcdefghijklmnop 

qrstuvwxyzaaéio& 


1234567890(9£.,!?) 


SERIF 


® RMIT 


UNIVERSITY 


SANS SERIF 


Sans Serif 


SANS SERIF 


Again, very simple — typefaces which don't have serif: 


ABCDEFGHIJKLMN 
NOPQRSTUVWXYZ 
abcdefghijkimnñopars 
tuvwxyz1234567890 


SANS SERIF 





SANS SERIF 


John Soane used sans-serif on his drawing & Neo-classicism 
Architecture (while trying to incorporate Greek 8 Roman 
design into contemporary structures) (late 18" century) 








GROTESQUE SANS SERIF 


Origin: 19^ Century 


+ Some contrast in stroke weight 


• Spurred 6 & double-bowl (two-storey) g 


* Examples: Franklin Gothic, Akzidenz Grotesque, etc. 


Franklin Gothic: 
The Quick Brown 
Fox Jumps Over 
The Lazy Dog. 


NEO-GROTESQUE SANS SERIF 


Origin: 20' Century 


+ Less contrast in stroke weight 
* More round curve with a single-bowl (one-storey) و‎ 


* Examples: Helvetica, Arial, Univers, Bell Centennial, etc. 


Helvetica: 

The Quick Brown 
Fox Jumps Over 
The Lazy Dog. 


GEOMETRIC SANS SERIF 


Most geometric, mechanical of sans serif typefaces. Almost perfect circle Os, os. 
Minimal difference between letters. 


Examples: Futura, Gotham, Century Gothic, Avant Garde, etc. 


Futura: 

The Quick Brown 
Fox Jumps Over 
The Lazy Dog. 


HUMANIST SANS SERIF 


Most calligraphic of sans serif typefaces. Instead of deriving from the 19th 
century grotesque faces, relate to the earlier, classical Roman form. 


Examples: Gill Sans, Optima, Frutiger, Calibri, Verdana, Tahoma, etc. 


Gill Sans: The 
Quick Brown Fox 
Jumps Over The 
Lazy Dog 


SCRIPTS 


a.k.a. Cursive 


Typefaces with fluid & rhythm, derived from or imitative of handwriting or calligraphy. 


ia ato 


ада Нис con un gie de گج‎ 


ПИ dari — 


MONOSPACE 


a.k.a. Monospaced 
A typeface that has letters and characters each occupy the same amount of 
horizontal space 


Examples: Courier, Inconsolata, Helvetica Monospaced, etc 


ABCDEFGHI JKLMNOPORSTUVWXYZ 
abedefghijklmnopgrstuvwxyzB 
0123456789'”:;=‹›+,-.?!#%Б* 
Qgeoo$£e£"[N] /](]* 
60888 60666 8 icf 
ААААДА 00000 71 











MONOSPACE 


All| the king's horses 
All the king's horses Monospaced 


This atlas of the stars has 
been designed to overcome 
disadvantages that the author 
has personally experienced 
when using similar charts. 


А11 че king's horses Proportional 
h 
hi 


MONOSPACE 


ГТ" 





MONOSPACE 





FORMAL SCRIPTS 


Elegant typestyle, flowing loops & flourishes, rhythmic strokes. 
Most often connecting 


Examples: Zapfino, Bickham Script, Commercial Script, etc. 


оду a neg ratum 
ABODE SGHIGILM 
— А ДУДА 


0123456789 


CASUAL 8 BRUSH SCRIPTS 


Designed to look informal, as though quickly drawn with brush or pen. 
Examples: Mistral, Brush Script, etc. 


ABCDEFGHIJKLMN 
NOPQRSTUVWXYZ 


АЛАНА а oa 
Zewwnnig1 22 46 6) 89 0 


HANDWRITING 


Typographic interpretations of actual handwriting. 


ABCDEFGHTIKLM 
NOPQRSTUVWXYZ 
abcdefghijkim 
nopgrstuvWky2 
0123456384124 
18010); 


BLACKLETTER 


English black letter developed from the form of Caroline minuscule used there 
after the Norman Conquest, sometimes called "Romanesque minuscule." 


Walbaum- Fraktur: Victor 
jagt zwolf Borfampfer 
quer über den Sylter 
Deich. 1234567890 


DISPLAY 


ak.a. Decorative 


Very broad category that contains typefaces that don't belong to previous 
categories. They are usually designed to be distinctive and engaging with very 


few or no rules apply. 
\ YC 


o: 
| 
N 




















DISPLAY 
AREBEFGHIUKLANGPG 
۸5۲0۷۷۷۷288٥259٥ 
bedeFghi ¡Mimnopgqr 
skuumješšćićalEl 


24Ч5БПВЧЕГ#Е. 1171 


AAAAAA 
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Serîf 

Sans Serîf 
Monospace 

Script 

Handwriting 
Blackletter 

Display 


Variants 
Weigh 

Width 

talic | Oblique. 
Style 


Formatting 
Sie 
Alignment. 
Line Length 
Leading 
Tracking 
Kerning 
Others 


VARIANTS 


Regular 
Italic 
Bold 

Boid Italic 


Regular 

Лайс 
Semibold 
Semibold Iralic 
Bold 

Bold Italie 


meas 
Light Condensed 

Regular Condensed 

Semibold Condensed 

Bold Condensed 
BlackCondensed 

Light Normal 

Regular Normal 
Semibold Normal 
Bold Normal 

Black Normal 

Light Extended 
Regular Extended 
Semibold Extended 
Bold Extended 
Black Extended 


VARIANTS 


mp dai r 
Kodar Zar tm sr lg 
oat 28 ov ату ar 
Koco No, 29, Junior gv deal for rma 
Knockout No. 30, Junior Welterweight. Compos 
Knockout No. 31, Junior Middleweight. Se 
Knockout No. 32, Jr Cruiserweight. R 
Knockout No, 33, Jr Heavyweight 
Knockout No. 34, Junior Sume 
Mark etc rh we 
Mari uth Soe pepe 
Kan eg Svit stars nd popo 
Knockout o A, Lig. ІСІ 
Knockout No. 50, Welterweight. Without overpov 


Knockout No. SI, Middleweight. The open 
Knockout No. 82, Crui 
Knockout No. 53, Heavyweight. F 
Knockout No. 54, Sumo. Page 
hh a tee sore hp 
Yar kı aasa ا را‎ ovirata 
ovat LP edi tte ic 
achat 8, gt. Far bed and cove 
Knockout Ne, TO, Fall Wetereight Packing the p 
Knockout No. 7, Full Middleweight. Suite 
Knockout No. 72, Full Cruiserweight 
Knockout No. 73, Full Heavywet 
Knockout No. 74, Fu 
Knockout No 80, Unimate Welterweight Not met 
‘Knockout No, 91, Ultimate Middlewelght. & 
Knockout No. 92, Uit. Cruiserweight. 
Knockout No. 93, UH. Heavywelg 
Knockout No. 94, Ultimate Si 





rwelght. Kno 





Sumo. 


WEIGHTS 


Helvetica Neue 25 Ultra Light 
elvetica Neue 35 Thin 
Helvetica Neue 45 Light 
Helvetica Neue 55 Roman 
Helvetica Neue 65 Medium 
Helvetica Neue 75 Bold 
Helvetica Neue 85 Heavy 
Helvetica Neue 95 Black 











WIDTH (CONDENSATION) 


condensed nomal expended 


TYPE CRIME! 
WIDE LOAD 


INTERSTATE BLACK 
The set width is the body of the lener 
plus the space beside i. 


TIGHT WAD 





pressed version of the typeface 
idi, 


WIDE LOAD 
TIGHT WAD 


‘TYPE CRIME 

HORIZONTAL & VERTICAL SCALING 

The proportions of the letters have been 
orted in order to create wider 










digitally 
or narrower letters. 





ITALIC / OBLIQUE 


Normal The five boxing wizards jump quickly. 





Halic The five boxing wizards jump quickly. 





Obie The five boxing wizards jump quickly. 





STYLISTIC 


FONTS Wm MULTIPLE LAYERS 
FONTS WITH MULTIPLE LAYERS 


STYLISTIC 


LAYERED 


TYPOGRAPHIC SYSTEM 
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Formatting 








SIZE 


Typographic Scale 


ab ab ab ab a ab ab ab ab AD ababab 


Left 


Laudae volorro illabor. 
inum, quia pa sum 


facepe pores dolorum, 





ilitio mint, sitat odi 
blatint Evers ditio. 
Lenditio velenim nim- 
ipsum rae. Ut reperro 
viderem volorem ctus, 
sita volore, 





quiscita consequia nat 
әдісін suntotas aciur 
aspella ccupiciunda et 
ро» dolupturerum esto d 





ALIGNMENT 


Right 


qui conem numquam il- 
litis estius, ad quam qui 
bla dio. Od quosandest, 


ollatem estiust labo. 
Nem nossim sentota quo 
ilibus quaspient landis 
dî od estiust labo. Nem 
mossiest, simax 





imust, occae pelibuseiat 
iur? Imodit et rerum, 
aborest ruptat dus 
nectem quí cum quas 
praessitio dem guaspe 








Centered 


dolorpos natquia quam. 
at eliant odite eum 
nam quaecea quibus. 


sa ditatibus alit, te 
ma quasperit volut asi 
velessegue des 
tur, oditatus si blabo. 
Ut dolupicatur, volest 
est laboribus. Abor- 
est, simaximust, occae. 
pelibusciat iur? Imodit 
et rerum, aborest ruptat 
dus nectem qui cum 
quas praessitio dem. 
quasperum, cus vellecus 








Justified 


facest, tem ent erunt 
voluptibea sae- 
cat eum qui utem et 
quiso maio. Сеш. 


Ehenihi Потоа que 
nim rectorioris mos dolo- 
ribusti bematquamet cos. 
soluptatur, omniti nos 
pero quibusnietvercima 


voluptatiur, quam 
veles ca que explique 
prestio temque зат 


LINE LENGTH 


The final factor to take into The final factor to take into account when deciding upon 
the appropriate line length is the nature of the actual text. 
upon the appropriate line Forinstance, some content - such as medical text - might 
length is the nature of the involve many longer words, lending itself to a wider 
actual text. For instance, column width to avoid excessive hyphenations. On the 
some content - such as ‘other hand, text used for children and young readers might 
medical text - might involve many short words, allowing for a narrower column, 
тоо NARROW. JUST RIGHT 





The final factor to take into account when deciding upon the appropriate line length is the nature of 
the actual text. For instance, some content = such as medical text - might involve many longer words, 
lending itself to а wider column width to avoid excessive hyphenations. On the other hand, text used 


for children and young readers might involve many short words, allowing for a narrower column. 
Too WIDE 


LEADING 


In typography, leading 
refers to the distance 
between the baselines of 
successive lines of type. 











“causes … 
collisions 


TRACKING 


Also called “letterspacing” 
Tracking set to -50 uu 


A helicopter is a type of roloreraft in which lift and Refers to a consistent 


thrust are supplied by one or more engine driven degree of increase / 
rotors. decrease of space between 
letters. 


Tracking set to O 

A helicopter is a type of rotorcra in which 
lift and thrust are supplied by one or more 
engine driven rotors. 


Tracking set to 100 

A helicopter is a type of rotorcraft in 
which lift and thrust are supplied by 
one or more engine driven rotors. 


KERNING 
is the process of 
A \ W a adjusting the spacing 
between characters in a 
No kerning 


proportional font 


Kerning applied 
ENS 


TYPE 


TRACKING ------ 


CAPITALIZATION 


ORANGE POLENTA CAKE — ^er 


BABY SQUID STUFFED WITH сомго 


OUSCOUS with DRIED APR 


FENNEL& LIME SALAD 


SAFFRON-ROAST TOMATOES WITH LABNEH 


Great Minds Think of Great Things 


Capitalized 





SMALL CAPS 





MONG the earliest methods of com- 
municating ideas to the absent pictures 
hold the largest place. 


HERE comes a tide in the affairs of men which, 
taken at the flood, leads on to fortune. 


INDENTATION 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula 
eget dolor. Aenean massa. 

Cum sociis natoque penatibus et magnis dis parturient montes, nascotur ridiculus mus. 
Donec quam felis, ultricies nec, pellentesque cu, pretium quis, som. Nulla consequat 
massa quis enim, 

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim jus 
rhoncus ut, imperdiet a, vei 
pretium. 

Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate 
eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim 

Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla 
ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel 
augue. 





9 
enatis vitae, justo. Nullam dictum felis eu pede mollis 





